<script lang="ts" setup>
// @ts-ignore
import {articleTimeFormat, deleteHTMLTag} from "~/utils/CommonUtil";
// @ts-ignore
import {ArticlePath} from "~/config/SystemConfig";
// @ts-ignore
let props = defineProps({
    article: '' as any,
    imgUrl: '' as any,
    wordNum: '' as any,
    readTime: '' as any
});

</script>
<template>
    <header class="site-header">
        <div class="entry-header header-bg"
             data-fancybox="images"
             data-slug="cover"
             :data-caption="props.article.articleTitle"
             :href="props.article.articleCover">
            <img width="2560" height="1440"
                 :src="props.article.articleCover"
                 class="attachment-post-thumbnail size-post-thumbnail wp-post-image loaded"
                 alt=""
                 decoding="async"
                 fetchpriority="high"
                 @error="handleErrorArticleImage">
            <i class="loading">封面图加载中</i>
        </div>
        <div class="entry-title">
            <h1>{{ props.article.articleTitle }}</h1>
            <div class="post-mark">
                <span class="tag">
                    <a :href="'/category?query='+props.article.categoryId" rel="category tag">{{ props.article.categoryName }}</a>
                </span>
                <span class="tag-list">
                    <template v-for="item in props.article.tags">
                        <a :href="'/tag/'+item.id+'?query='+item.tagName" rel="tag">{{ item.tagName }}</a>
                    </template>
              </span>
            </div>
        </div>
        <div class="entry-meta">
            <div class="entry-meta-left no-scrollbar">
                <div class="author-date" v-if="props.article.author">
                    <a class="url fn n" href="#" title="View all posts by Auth"
                       rel="author">作者 · {{ props.article.author.nickname }}</a>
                    <span class="entry-date">
                        <a href="#" title="16:28" rel="bookmark">
                        <time :datetime="props.article.createTime">
                            {{ articleTimeFormat(String(props.article.createTime)) }}
                        </time>
                        </a>
                    </span>
                </div>
                <template v-if="props.article.articleExtraContentVO">
                    <div class="post-weather" v-if="props.article.articleExtraContentVO.weather">
                        <i>天气</i>
                        <span>{{ props.article.articleExtraContentVO.weather }}</span>
                    </div>
                    <div class="post-mood" v-if="props.article.articleExtraContentVO.mood">
                        <i>心情</i>
                        <span>{{ props.article.articleExtraContentVO.mood }}</span>
                    </div>
                    <div class="post-location" v-if="props.article.articleExtraContentVO.location">
                        <i>地点</i>
                        <span>{{ props.article.articleExtraContentVO.location }}</span>
                    </div>
                </template>
                <div class="post-views"><i>热度</i><span>{{ props.article.viewCount + 999 }}</span></div>
                <div class="words-num"><i>本文共计</i><span>{{ wordNum }}字</span></div>
                <div class="read_time"><i>预计阅读</i><span>{{ readTime }}分钟</span></div>
            </div>
            <div class="entry-meta-right">
                <aside class="entry-summary blur-saturate">
                    <span>{{ props.article.articleAbstract }}</span>
                </aside><!-- .entry-summary -->
                <nav class="navigation post-navigation" role="navigation">
                    <template v-if="props.article.preArticleCard">
                        <a :href='ArticlePath.Path + props.article.preArticleCard.id' rel="prev"></a>
                    </template>
                    <template v-if="props.article.nextArticleCard">
                        <a :href='ArticlePath.Path + props.article.nextArticleCard.id' rel="next"></a>
                    </template>
                </nav><!-- .navigation -->
            </div>
        </div>
    </header>
</template>
